• Adding Sorting to a Repeating Section
• Duplicate and Copy Rows in a Repeating Section
• Dynamically Compute Values for Added Rows in a Repeating Section
• Populating a Repeating Section from a Table
• Prompting for Content in a Repeating Section before Adding a Row
• Swapping and Moving Rows in a Repeating Section

Duplicate and Copy Rows in a Repeating Section

Description

There are several methods that you can use with repeating sections to give them additional functionality such as the ability to duplicate rows, override existing rows, and copy rows.

Duplication and Copying capabilities can be added to a repeating section by tying one of the following methods to a Javascript event.

• duplicateRepeatingSectionRow()
• copyRepeatingSectionRow()

For more on how to implement methods to duplicate and/or copy the rows in a repeating section watch this video or follow the guide below.

Using the duplicateRepeatingSectionRow Method

1. In the UX Builder on the UX Controls page, open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give the control a name and label, such as 'name'.

   

2. Click to add a second textbox control to the component. Give the control a name and label like 'order'.

   

3. Highlight both controls in the controls tree and open the Containers menu. Select the [Container] option.

   

4. Set the 'Container Type' to be 'RepeatingSection'. Click OK.

   

5. Highlight one of the textbox controls inside the container. Open the 'Other Controls' menu and click on the [Button] option to add a button control to the component.

   

6. Highlight the button control. In the properties list on the right under 'Button Properties' set the 'Button text' property to read 'Duplicate.'

   

7. Scroll down to the 'Javascript' section of the properties list and click the [...] button next to the 'onClick' property.

   

8. In the Edit onClick Event dialog set the 'Editing mode to be 'Text mode'. Click 'Save'.

   {dialog.object}.duplicateRepeatingSectionRow('REPEATINGSECTION_1');

   

9. Run the component in Live preview. Enter something into both of the fields on one of the rows. Click the 'Duplicate' button.

   

10. The row should be duplicated.

    

Using the copyRepeatingSectionRow Method

1. Continuing from the section above, return to the Design tab. On the UX Controls page open the 'Other Controls' menu and click on the [Button] option. Add the button underneath the Repeating Section in the controls tree.

   

2. Highlight the new button control. In the properties list on the right set the 'Button text' property to read 'Copy Row'.

   

3. Scroll down to the 'Javascript' section of the properties list. Click on the [...] button next to the 'onClick' property.

   

4. In the Edit onClick Event dialog select the 'Text mode' radio button then add the following code to the event definition. Click 'Save'.

   {dialog.object}.copyRepeatingSectionRow('REPEATINGSECTION_1',1,-1,true);

   
   The copyRepeatingSectionRow method contains the following arguments: container id, a source row number, a target row number, and a logical argument. The logical 'true' or 'false' argument at the end of the method specifies whether or not to display a prompt that allows the user to override the data. Data is copied from the source row to the target row, i.e. the row that has focus.

5. Run the component in Live Preview. Type something into the fields on the first row.

   

6. Highlight any other row in the repeating section and click the 'Copy Row' button. The text entered into the first row should be copied onto the highlighted row.

   

7. Try copying data onto a row that already has data in it. You should see the prompt asking if you want to overwrite the data.